<template>
  <!--准备具有一定高度的容器-->
  <div class="box" ref="line"></div>
</template>

<script setup lang="ts">
//第一步:引包
import * as echarts from "echarts";

//引入组合式API函数onMounted->获取到容器DOM元素
import { onMounted, ref } from "vue";
//同名的ref对象:获取div的DOM元素
let line = ref();

onMounted(() => {
  //初始化echarts实例
  let mycharts = echarts.init(line.value);
  //准备配置对象
  let options = {
    xAxis: {
      show: false,
      //均匀分布
      type: "category",
      //两侧留白策略，不需要
      boundaryGap: false,
      //x轴的指示器
      axisPointer: {
        show: true,
        type: "line",
      },
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "line",
      data: props.orderTrend,
      //平滑曲线
      smooth: true,
      //拐点的设置
      symbol: "none",
      //填充颜色
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "green", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "cyan", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    //布局组件
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      //图形图标背景颜色的设置
      show: true,
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "skyblue", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "yellowgreen", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    //提示框组件
    tooltip: {
      //提示框位置的设置
      position: function (point, params, dom, rect, size) {
        // 固定在顶部
        return [point[0], "10%"];
      },
      //约束提示框在容器内部展示
      confine:true,
      //提示框背景颜色
      backgroundColor:'rgba(0,0,0,.5)',
      //文字颜色
      textStyle:{
          color:'white'
      }
    },
  };
  //设置配置项
  mycharts.setOption(options);
  
  window.addEventListener("resize",()=>{
    mycharts.resize();//更新图标的大小
  })
});


let props = defineProps(['orderTrend']); 
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>